<template>
  <div>
    <Modal
        width="900"
        class="modal-tips"
        v-model="config"
        @on-cancel="cancelEvent"
        :mask-closable="false"
        footer-hide
        title="选择域名"
    >
      <div class="modal-main">
        <div style="height: 420px; overflow-y: auto">
          <div class="filter-line b-b-d flx-row-s-c">
            <span class="item-name">域名状态</span>
            <span
                v-for="(item, index) in statusList"
                :key="index"
                class="select-item"
                :class="[item.value === status ? 'active' : 'normal']"
                @click="selectStatusEvent(item.value)">{{ item.name }}</span>
          </div>
          <div class="filter-line b-b-d flx-row-s-c">
            <span class="item-name pub-m-t-6">域名</span>
            <textarea
                placeholder="批量请换行分隔"
                class="dmTextarea"
                style="overflow-y: auto; z-index: 1100; top: 0; width: 150px"
                @focus="dmName = true"
                @blur="domainBlur()"
                :class="dmName ? 'dmTyping' : ''"
                v-model.trim="domain" />
            <span class="item-name" style="text-align: right">注册时间</span>
            <DatePicker
                :editable="false"
                :value="createdTime"
                type="daterange"
                format="yyyy/MM/dd"
                placeholder=""
                style="width: 210px"
                @on-change="
                (value) => {
                  this.createdTime = value;
                }
              "></DatePicker>
            <span class="item-name">域名后缀</span>
            <Select v-model="domainSuffix" style="width: 150px">
              <Option
                  v-for="item in domainSuffixList"
                  :value="item.suffix"
                  :key="item.suffix"
              >{{ item.suffix }}</Option
              >
            </Select>
          </div>
          <div class="filter-line b-b-d flx-row-s-c">
            <span class="item-name">模板</span>
            <span class="c-d2 f-w-600 f-14 cursor-pointer" v-if="selectTemplateName" style="margin-right: 15px" @click="templateSelectModalShow = true">
              {{ selectTemplateName }}
            </span>
            <div class="b-user-strong-button small-code-button cursor-pointer" style="width: 150px" @click="templateSelectModalShow = true" v-else>
              点击选择
            </div>
            <span class="item-name">过期时间</span>
            <DatePicker
                :editable="false"
                :value="expireTime"
                type="daterange"
                format="yyyy/MM/dd"
                placeholder=""
                style="width: 210px"
                @on-change="
                (value) => {
                  this.expireTime = value;
                }
              "></DatePicker>
            <div class="user-strong-button line-button-size" style="margin: 0 10px 0 30px" @click="searchEvent">
              搜索
            </div>
            <div class="user-normal-button line-button-size" @click="searchClearEvent">重置
            </div>
          </div>
          <!-- 表格 -->
          <Table
              :loading="loading"
              ref="domainTable"
              :columns="columns"
              :data="pageData.list"
              :disabled-hover="true"
              stripe
              @on-select="onSelectEvent"
              @on-select-cancel="onSelectCancelEvent"
              @on-select-all="onSelectAllEvent"
              @on-select-all-cancel="onSelectAllCancelEvent"
          ></Table>
          <div class="form-page-bottom-area flx-row-c-c">
            <Page
                :total="pageData.total"
                :current="pageData.page"
                :page-size="pageData.limit"
                :page-size-opts="pageSizeOpts"
                show-elevator
                show-sizer
                show-total
                @on-change="pageChange"
                @on-page-size-change="pageSizeChange"
            />
          </div>
        </div>
        <div class="flx-row-c-c" style="margin-top: 30px">
          <template v-if="$slots.confirm">
            <div class="confirm-btn">
              <slot name="confirm"></slot>
            </div>
          </template>
          <div class="big-button-size user-strong-button" style="margin-right: 50px" @click="confirmEvent">
            确定
          </div>
          <template v-if="$slots.cancel">
            <div class="cancel-btn">
              <slot name="cancel"></slot>
            </div>
          </template>
          <div class="big-button-size user-normal-button" @click="cancelEvent">
            取消
          </div>
        </div>
      </div>
    </Modal>
    <template-select-modal
        :show.sync="templateSelectModalShow"
        :tSelect="templateSelect"
        @check-submit="selectTemplateSubmit"
    ></template-select-modal>
  </div>

</template>

<script>
import TemplateSelectModal from "_c/modal/templateSelectModal/templateSelectModal.vue";
import { domainPageList } from "@/api/bidding";
import { getDomainSuffix } from "@/api/data";
import { parseDomain } from "@/utils/formatDomain";
export default {
  name: "domainSelectModal",
  components: {
    TemplateSelectModal,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          this.reset();
        }
      },
    }
  },
  data() {
    return {
      statusList: [
        {
          name: '全部域名',
          value: null
        },
        {
          name: '正常',
          value: 0
        },
        {
          name: '即将到期',
          value: 3
        },
      ],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "序号",
          type: "index",
          width: 100,
          align: "center",
        },
        {
          title: "域名",
          key: "domainName",
          align: "center",
        },
        {
          title: "注册商",
          key: "isOutside",
          align: "center",
          render: (h, params) => {
            return h("span", params.row.isOutside === 0 ? "190" : "外部");
          },
        },
      ],
      status: null,
      createdTime: [],
      expireTime: [],
      domainSuffixList: [],
      domainSuffix: null,
      selectTemplateName: false,
      config: false,
      templateSelectModalShow: false,
      templateSelect: null,
      dmName: false,
      domain: '',
      // 域名列表
      pageData: {
        // 域名总数
        total: 0,
        list: [],
        // 页码
        page: 1,
        // 分页调试
        limit: 50,
      },
      pageSizeOpts: [50, 100, 150, 200],
      // 表格加载状态
      loading: false,
      domainList: [],
    }
  },
  methods: {
    // checkbox单个选中数据
    onSelectEvent(selection) {
      this.domainList = selection.map(item => item.domainName)
    },
    // checkbox单个取消数据
    onSelectCancelEvent(selection) {
      this.domainList = selection.map(item => item.domainName)
    },
    // checkbox全选的数据
    onSelectAllEvent(selection) {
      this.domainList = selection.map(item => item.domainName)
    },
    // checkbox取消全选的数据
    onSelectAllCancelEvent() {
      this.domainList = []
    },
    domainBlur() {
      this.dmName = false
      this.domain = parseDomain(this.domain, false)
    },
    confirmEvent() {
      if (this.domainList.length === 0) {
        return this.$Message.warning("请选择域名！");
      }
      this.$emit('selectDomainConfirmEvent', this.domainList.join("\n"));
      this.config = false;
    },
    cancelEvent() {
      this.config = false;
      this.$emit('cancelDomainConfirmEvent');
    },
    searchEvent() {
      this.getList();
    },
    // 重置
    reset() {
      this.config = true
      this.getDomainSuffix()
      this.searchClearEvent()
      this.getList();
    },
    getList() {
      this.pageData.page = 1;
      this.getDomainPageList()
    },
    // 重置
    searchClearEvent() {
      this.domainList = []
      this.status = null;
      this.createdTime = [];
      this.expireTime = [];
      this.startExpireTime = "";
      this.endExpireTime = "";
      this.domainSuffix = null;
      this.templateSelect = null;
      this.selectTemplateName = "";
      this.domain = "";
      this.pageData.page = 1;
      this.pageData.limit = 50;
      this.pageData.list = [];
      this.pageData.total = 0;
      this.getDomainPageList();
    },
    selectStatusEvent(val) {
      this.status = val;
    },
    selectTemplateSubmit(id, name) {
      this.templateSelect = id;
      this.selectTemplateName = name;
    },
    // 表格分页事件
    pageChange(val) {
      this.pageData.page = val;
      this.getDomainPageList();
    },
    pageSizeChange(val) {
      this.pageData.limit = val;
      this.getDomainPageList();
    },
    // 遮罩层域名筛选
    async getDomainPageList() {
      let domain = this.domain.replace(/\n/g, ",");
      const params = {};
      this.status && (params.type = this.status);
      if (this.createdTime != null && this.createdTime.length > 0) {
        params.startCreatedTime = this.createdTime[0].replaceAll("/", "-")
        params.endCreatedTime = this.createdTime[1].replaceAll("/", "-")
      } else {
        params.startCreatedTime = null
        params.endCreatedTime = null
      }
      if (this.expireTime != null && this.expireTime.length > 0) {
        params.startExpireTime = this.expireTime[0].replaceAll("/", "-")
        params.endExpireTime = this.expireTime[1].replaceAll("/", "-")
      } else {
        params.startExpireTime = null
        params.endExpireTime = null
      }
      this.domainSuffix && (params.domainSuffix = this.domainSuffix);
      this.templateSelect && (params.templateId = this.templateSelect);
      this.domain && (params.name = domain);
      params.page = this.pageData.page;
      params.limit = this.pageData.limit;
      this.tableLoading = true;
      const { code, data } = await domainPageList(params);
      this.tableLoading = false;
      if (code === 200 && data) {
        this.pageData.list = data.list;
        this.pageData.total = data.total;
      }
    },
    // 获取域名后缀
    async getDomainSuffix() {
      if (this.domainSuffixList.length > 0) return false;
      const { code, data } = await getDomainSuffix();
      if (code === 200) {
        this.domainSuffixList = data;
      }
    },
  }
}
</script>

<style scoped>
.modal-main {
  position: relative;
  padding: 0 0 30px 30px;
}
</style>
